<template>
  <!--客户管理-->
  <div>

    <!--标签页-->
    <div>
<!--      <el-tabs v-model="activeName" @tab-click="handleClick">-->
<!--        <el-tab-pane label="全部客户" name="first">-->

<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="潜在客户" name="second">-->

<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="签约客户" name="third">-->

<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="重复购买" name="fourth">-->

<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="失效客户" name="fifth">-->

<!--        </el-tab-pane>-->
<!--      </el-tabs>-->
      <!--客户分级条件-->
      <div>
            <span style="padding: 0px 10px">
              <i class="el-icon-s-check"></i>
            </span>
        <el-select v-model="allValue" value-key="id" @change="initData(currPage,pageSize,allValue.value,1)" placeholder="请选择" style="width: 145px">
          <el-option-group v-for="group in allOptions" :key="group.label"
                           :label="group.label">
            <el-option v-for="item in group.options" :key="item.value"
                       :label="item.label" :value="item">
            </el-option>
          </el-option-group>
        </el-select>

        <span style="padding: 0 10px 0 30px"><i class="fn el-icon-s-promotion"></i></span>
        <el-input v-model="searchValue" clearable placeholder="请输入客户关键字" clearable style="width: 180px"></el-input>
        <el-button @click="initData(currPage,pageSize,searchValue,2)" icon="el-icon-search" size="small" circle></el-button>
      </div>
      <!--数据表格-->
      <div>
        <!--新增客户-->
        <el-row style="margin-top: 15px">
          <el-row>
            <el-col :span="12" >
                <span set-lan="html:客户基本信息">客户基本信息</span>
                <small class="text-muted font-13">共{{totalSize}}条</small>
            </el-col>
            <el-col :span="24" >
              <el-button type="text" @click="exportExcelCustomer">
                <el-button size="small" icon="el-icon-top-left">客户信息Excel导出</el-button>
              </el-button>
              <el-button type="text" @click="exportExcelCustomerMoney">
                <el-button size="small" icon="el-icon-top-left">财务数据Excel导出</el-button>
              </el-button>
              <el-button type="text" @click="handleWindowPrint('#outTableCustomer', '客户基本信息打印')">
                <el-button size="small" icon="el-icon-printer">客户基本信息打印</el-button>
              </el-button>
              <el-button type="text" @click="handleWindowPrint('#outTableCustomerMoney', '客户财务数据打印')">
                <el-button size="small" icon="el-icon-printer">客户财务数据打印</el-button>
              </el-button>
              <el-button type="text" @click="dialogFormVisible = true" class="text-right">
                <el-button size="small" icon="el-icon-circle-plus-outline">新增客户</el-button>
              </el-button>
            </el-col>
          </el-row>
        </el-row>
        <!--新增客户dialog简略版-->
        <el-dialog @open="" @close="closeDialog('newCustomer')"  :visible.sync="dialogFormVisible" width="60%" style="color: #333333;"  >
          <el-form :model="customer" :rules="rules" ref="newCustomer" label-width="100px">
            <el-row style="text-align: center">
              <span style="font-size: 28px;line-height: 28px">新增客户</span>
            </el-row>
            <el-row>
              <el-button style="float: right" size="middle" @click="addCustomerDetail()" icon="el-icon-edit" plain>详细信息编辑</el-button>
            </el-row>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="customerName" label="客户:" style="width: 95%">
                  <el-input  v-model="customer.customerName" placeholder="客户名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item prop="customerSimplename" label="简称:" style="width: 90%">
                  <el-input v-model="customer.customerSimplename" placeholder="客户简称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="customerFrom" label="来源:" style="width: 90%">
                  <el-select v-model="customer.customerFrom" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in userFrom"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item prop="customerPhone" label="手机:" style="width: 90%">
                  <el-input v-model="customer.customerPhone" placeholder="手机号码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="customerTel" label="电话:" style="width: 90%">
                  <el-input v-model="customer.customerTel" placeholder="电话号码"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="customerTip" label="备注:" style="width: 95%">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="customer.customerTip"
                  style="width: 100%">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24" :offset="8">
                <el-form-item>
                  <el-button @click="addNewCustomer('newCustomer')" type="primary">保存</el-button>
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-dialog>

        <!--新增客户dialog详细版-->
        <el-dialog  @open="" @close="closeDialog('newCustomerDetail')" :visible.sync="dialogFormAddVisible" width="60%" style="color: #333333;"  >
          <el-form :model="customer" :rules="rules" ref="newCustomerDetail" label-width="100px">
            <el-row style="text-align: center">
              <span style="font-size: 28px">新增客户</span>
            </el-row>
            <el-divider>基本信息</el-divider>
            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名:" prop="customerName" style="width: 90%">
                  <el-input v-model="customer.customerName" placeholder="客户名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="customerSimplename" label="简称:" style="width: 90%">
                  <el-input v-model="customer.customerSimplename" placeholder="客户简称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item prop="customerType" label="类型:" style="width: 90%">
                  <el-select v-model="customer.customerType" placeholder="请选择客户类型" style="width: 100%">
                    <el-option
                      v-for="(item,index) in userType"
                      :key="index"
                      :label="item.label"z
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="customerFrom" label="来源:" style="width: 90%">
                  <el-select v-model="customer.customerFrom" placeholder="请选择客户来源" style="width: 100%">
                    <el-option
                      v-for="(item,index) in userFrom"
                      :key="index"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-divider>客观特征</el-divider>
            <el-row>
              <el-col :span="12">
                <el-form-item label="行业:" style="width: 90%">
                  <el-input v-model="customer.customerWork" placeholder="从事行业"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="人员规模:" style="width: 90%">
                  <el-input v-model="customer.customerPeoplenumber" placeholder="人数（人）"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="公司简介:" style="width: 95%">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入公司简介"
                    v-model="customer.customerCompanytip"
                    style="width: 100%">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-divider>联系方式</el-divider>
            <el-row>
              <el-col :span="12">
                <el-form-item prop="customerPhone" label="手机:" style="width: 90%">
                  <el-input v-model="customer.customerPhone" placeholder="客户手机"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话:" style="width: 90%">
                  <el-input v-model="customer.customerTel" placeholder="客户电话"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="网址:" style="width: 95%">
                  <el-input v-model="customer.customerHttp" placeholder="http://"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="customerAddress" label="地址:" style="width: 95%">
                  <el-input v-model="customer.customerAddress" placeholder="详细地址"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注:" style="width: 95%">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="客户备注"
                    v-model="customer.customerTip"
                    style="width: 100%">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24" :offset="8">
                <el-form-item>
                  <el-button @click="addNewCustomer('newCustomerDetail')" type="primary">保存</el-button>
                  <el-button @click="dialogFormAddVisible = false">取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-dialog>

        <!--修改客户dialog-->
        <el-dialog  @open="openDialog" @close="closeDialog('cus')" :visible.sync="dialogFormEditVisible" width="60%" style="color: #333333;"  >
            <el-form :model="customer" :rules="rules" ref="cus" label-width="100px">
              <el-row style="text-align: center">
                <span style="font-size: 28px">客户信息修改</span>
              </el-row>
              <el-divider>基本信息</el-divider>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="姓名:" prop="customerName" style="width: 95%">
                    <el-input v-model="customer.customerName" placeholder="客户名称"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="customerSimplename" label="简称:" style="width: 90%">
                    <el-input v-model="customer.customerSimplename" placeholder="客户简称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="customerType" label="类型:" style="width: 90%">
                    <el-select v-model="customer.customerType" placeholder="请选择客户类型" style="width: 100%">
                      <el-option
                        v-for="(item,index) in userType"
                        :key="index"
                        :label="item.label"z
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="编号:" style="width: 90%">
                    <el-input :disabled="true" v-model="customer.customerId" placeholder="客户编号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="customerFrom" label="来源:" style="width: 90%">
                    <el-select v-model="customer.customerFrom" placeholder="请选择客户来源" style="width: 100%">
                      <el-option
                        v-for="(item,index) in userFrom"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="所有者:" v-if="customer.employeeByEmpId" prop="employeeByEmpId.empName" style="width: 95%">
                    <el-input :disabled="true" v-model="customer.employeeByEmpId.empName" placeholder="暂无"></el-input>
                  </el-form-item>


                  <div class="form-inline" v-show="isEmp">
                    <el-input v-model="empValue" clearable size="medium" placeholder="拼音.字母.关键字" style="width: 35%"></el-input>
                    <el-tooltip class="item" effect="dark" content="搜索员工" placement="bottom">
                      <el-button @click="findEmp" size="medium" icon="el-icon-search"></el-button>
                    </el-tooltip>
                    <el-popover placement="top" v-model="visible">
                      <div style="margin-bottom: 10px">
                        <span>查询条件:{{empValue}}</span>
                        <span @click="nullFocus" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                      </div>
                      <ul class="cu-ul" v-if="empList !== ''">
                        <li @click="choiceEmp(item)" v-for="item in empList">{{item.empName}}</li>
                      </ul>
                      <div style="margin: 5px 0;text-align: center" v-if="empList == ''">
                        <i class="el-icon-warning-outline"/>没有符合条件的客户！
                      </div>
                    </el-popover>
                    <el-tooltip class="item" effect="dark" content="浏览选择员工" placement="bottom">
                      <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                    </el-tooltip>
                  </div>
                </el-col>
                  <!--内层dialog-->
                  <el-dialog width="30%" title="全部员工" :visible.sync="innerDialog" append-to-body>
                    <!--选择客户-->
                    <el-table :data="empList" style="width: 100%">
                      <el-table-column prop="empId" label="员工编号" >
                      </el-table-column>
                      <el-table-column prop="empName" label="员工姓名" >
                      </el-table-column>
                      <el-table-column label="请选择" >
                        <template slot-scope="scope">
                          <el-button size="mini" @click="choiceEmp(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <el-row style="margin-top:10px">
                      <el-col :span="16">
                        <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                                       :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
                      </el-col>
                    </el-row>
                  </el-dialog>



              </el-row>

              <el-divider>客观特征</el-divider>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="行业:" style="width: 90%">
                    <el-input v-model="customer.customerWork" placeholder="从事行业"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="人员规模:" style="width: 90%">
                    <el-input v-model="customer.customerPeoplenumber" placeholder="人数（人）"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="公司简介:" style="width: 95%">
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入公司简介"
                      v-model="customer.customerCompanytip"
                      style="width: 100%">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-divider>联系方式</el-divider>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="customerPhone" label="手机:" style="width: 90%">
                    <el-input v-model="customer.customerPhone" placeholder="客户手机"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="电话:" style="width: 90%">
                    <el-input v-model="customer.customerTel" placeholder="客户电话"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="网址:" style="width: 95%">
                    <el-input v-model="customer.customerHttp" placeholder="http://"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item prop="customerAddress" label="地址:" style="width: 95%">
                    <el-input v-model="customer.customerAddress" placeholder="详细地址"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注:" style="width: 95%">
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="客户备注"
                      v-model="customer.customerTip"
                      style="width: 100%">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-divider>生命周期</el-divider>
              <el-row>
                <el-col :span="12" style="padding-left: 7%;padding-top:11px">
                  <el-radio-group :disabled="true" v-model="customer.customerLifecycle">
                    <el-radio :label="1">潜在客户</el-radio>
                    <el-radio :label="2">签约</el-radio>
                    <el-radio :label="3">重复购买</el-radio>
                    <el-radio :label="4">失效</el-radio>
                  </el-radio-group>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="首次签约:" >
                    <el-input :disabled="true" v-model="customer.customerContractdate" placeholder="暂未签约" style="width: 90%">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24" :offset="8">
                  <el-form-item>
                    <el-button @click="updateCustomer('cus')" type="primary">保存</el-button>
                    <el-button @click="dialogFormEditVisible = false">取消</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-dialog>


        <el-tabs type="border-card">
          <el-tab-pane label="基本信息">
            <el-table
              id="outTableCustomer"
              ref="multipleTable"
              :data="customerList"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                prop="customerId"
                label="ID" width="70px">
              </el-table-column>
              <el-table-column
                label="简称"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <router-link :to="{path:'/customerView',query: {customerId: scope.row.customerId}}">
                    <span style="color: #333333">
                      <span class="routerHover">{{scope.row.customerSimplename}}</span>
                    </span>
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column
                label="客户名称"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <router-link :to="{path:'/customerView',query: {customerId: scope.row.customerId}}">
                    <span style="color: #333333">
                      <span class="routerHover">{{scope.row.customerName}}</span>
                    </span>
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column
                prop="customerLifecycle"
                label="生命周期"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-if="scope.row.customerLifecycle == 1">{{customerLifecycle[0].label}}</span>
                  <span v-if="scope.row.customerLifecycle == 2">{{customerLifecycle[1].label}}</span>
                  <span v-if="scope.row.customerLifecycle == 3">{{customerLifecycle[2].label}}</span>
                  <span v-if="scope.row.customerLifecycle == 4">{{customerLifecycle[3].label}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="customerType"
                label="种类"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-if="scope.row.customerType == 1">{{userType[0].label}}</span>
                  <span v-if="scope.row.customerType == 2">{{userType[1].label}}</span>
                  <span v-if="scope.row.customerType == 3">{{userType[2].label}}</span>
                  <span v-if="scope.row.customerType == 4">{{userType[3].label}}</span>
                  <span v-if="scope.row.customerType == 5">{{userType[4].label}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="employeeByEmpId.empName"
                label="所有者"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="customerCreatdate"
                label="创建日期">
              </el-table-column>

              <el-table-column prop="" label="操作" width="135px">
                <template slot-scope="scope">
                  <router-link :to="{path:'/customerView',query: {customerId: scope.row.customerId}}">
                    <el-tooltip class="item" effect="dark" content="视图" placement="bottom">
                      <el-button size="mini"
                                 icon="el-icon-tickets" type="success" circle></el-button>
                    </el-tooltip>
                  </router-link>
                  <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
                    <el-button size="mini" @click="handleEdit(scope.row)"
                               icon="el-icon-edit" type="primary" circle style="margin-left: 10px"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="财务数据">
            <el-table
              id="outTableCustomerMoney"
              ref="multipleTable"
              :data="customerList"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                prop="customerId"
                label="ID" width="70px">
              </el-table-column>
              <el-table-column
                prop="customerSimplename"
                label="简称">
                <template slot-scope="scope">
                  <router-link :to="{path:'/customerView',query: {customerId: scope.row.customerId}}">
                    <span style="color: #333333">
                      <span class="routerHover">{{scope.row.customerSimplename}}</span>
                    </span>
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column
                prop="customerName"
                label="客户名称"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <router-link :to="{path:'/customerView',query: {customerId: scope.row.customerId}}">
                    <span style="color: #333333">
                      <span class="routerHover">{{scope.row.customerName}}</span>
                    </span>
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column
                prop="employeeByEmpId.empName"
                label="所有者"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="contractsByCustomerId[0].contractTotalAmount"
                label="合约总金额(元)"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-if="scope.row.contractsByCustomerId.length === 0">0</span>
                  <span v-if="scope.row.contractsByCustomerId.length != 0">
                    {{scope.row.contractsByCustomerId[0].contractTotalAmount}}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="payMoney"
                label="交付/发货产品总价(元)"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span v-if="scope.row.contractsByCustomerId.length === 0">0</span>
                    <span v-if="scope.row.contractsByCustomerId.length != 0">
                    {{scope.row.contractsByCustomerId[0].contractTotalAmount}}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="contractsByCustomerId[0].contractBackAmount"
                label="回款(元)"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-if="scope.row.contractsByCustomerId.length === 0">0</span>
                  <span v-if="scope.row.contractsByCustomerId.length != 0">
                    {{scope.row.contractsByCustomerId[0].contractBackAmount}}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop=""
                label="待回款(元)"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-if="scope.row.contractsByCustomerId.length === 0">0</span>
                 <span v-if="scope.row.contractsByCustomerId.length != 0">
                   {{scope.row.contractsByCustomerId[0].contractTotalAmount-scope.row.contractsByCustomerId[0].contractBackAmount}}
                 </span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 分页 -->
          <el-row style="margin-top:20px">
            <el-col :span="1">
              <el-tooltip class="item" effect="dark" content="批量导出客户数据(选中客户)" placement="bottom">
                <el-button style="padding: 12px 12px" icon="el-icon-download"
                           @click="judePrint" type="primary"></el-button>
              </el-tooltip>
            </el-col>
            <el-col :span="1">
              <el-tooltip class="item" effect="dark" content="批量客户转移(选中客户)" placement="bottom">
                <el-button style="padding: 12px 12px" icon="el-icon-d-arrow-right"
                           @click="judeSelect" type="primary"></el-button>
              </el-tooltip>
            </el-col>
            <!--客户转移-->
            <el-dialog @open="" @close="closeChangeEmp" :visible.sync="dialogChange" width="60%" style="color: #333333;"  >
              <el-form>
                <el-row style="text-align: center">
                  <span style="font-size: 28px">客户批量转移</span>
                </el-row>
                <el-divider></el-divider>

                <el-row style="padding: 40px">
                  <el-col :span="24">
                    <el-input :disabled="true" v-model="changeEmp.empName" placeholder="目标员工"></el-input>
                    <div class="form-inline" v-show="isEmp" style="margin-left: -100px;margin-top: 20px;">
                      <el-input v-model="empValue" clearable size="medium" placeholder="拼音.字母.关键字" style="width: 35%"></el-input>
                      <el-tooltip class="item" effect="dark" content="搜索员工" placement="bottom">
                        <el-button @click="findEmp" size="medium" icon="el-icon-search"></el-button>
                      </el-tooltip>
                      <el-popover placement="top" v-model="visible">
                        <div style="margin-bottom: 10px">
                          <span>查询条件:{{empValue}}</span>
                          <span @click="nullFocus" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                        </div>
                        <ul class="cu-ul" v-if="empList !== ''">
                          <li @click="choiceEmp2(item)" v-for="item in empList">{{item.empName}}</li>
                        </ul>
                        <div style="margin: 5px 0;text-align: center" v-if="empList == ''">
                          <i class="el-icon-warning-outline"/>没有符合条件的客户！
                        </div>
                      </el-popover>
                      <el-tooltip class="item" effect="dark" content="浏览选择员工" placement="bottom">
                        <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                      </el-tooltip>
                    </div>
                  </el-col>
                  <!--内层dialog-->
                  <el-dialog width="30%" title="全部员工" :visible.sync="innerDialog" append-to-body>
                    <!--选择客户-->
                    <el-table :data="empList" style="width: 100%">
                      <el-table-column prop="empId" label="员工编号" >
                      </el-table-column>
                      <el-table-column prop="empName" label="员工姓名" >
                      </el-table-column>
                      <el-table-column label="请选择" >
                        <template slot-scope="scope">
                          <el-button size="mini" @click="choiceEmp2(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <el-row style="margin-top:10px">
                      <el-col :span="16">
                        <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                                       :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
                      </el-col>
                    </el-row>
                  </el-dialog>



                </el-row>

                <el-row>
                  <el-col :span="24" :offset="10">
                    <el-form-item>
                      <el-button @click="changeEmpMessage" type="primary">转移</el-button>
                      <el-button @click="dialogChange = false">取消</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-dialog>
            <el-col :span="24" style="text-align: center">
              <el-pagination layout="prev, pager, next, jumper" :total="totalSize" @current-change="changePage"
                             :current-page.sync="currPage" :page-size="pageSize"></el-pagination>
            </el-col>
          </el-row>
        </el-tabs>

        <el-tabs type="border-card" style="margin-top: 15px">
          <el-tab-pane label="客户统计">
            <el-tabs v-model="defaultSection" @tab-click="handleClickCount">
              <el-tab-pane label="所有客户" name="all"></el-tab-pane>
              <el-tab-pane label="我的客户" name="my"></el-tab-pane>
            </el-tabs>
            <el-row>
              <el-col :span="12">
                <div style="width: 900px;height:600px;margin: 30px auto 0px" ref="chart"></div>
              </el-col>
              <el-col :span="12">
                <div style="width: 900px;height:600px;margin: 30px auto 0px" ref="chart2"></div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="财务统计">
            <el-tabs v-model="defaultSectionMoney" @tab-click="handleClickContract">
              <el-tab-pane label="所有客户" name="1"></el-tab-pane>
              <el-tab-pane label="我的客户" name="2"></el-tab-pane>
            </el-tabs>
            <el-row :span="24">
              <div>

              </div>
            </el-row>
            <el-row>
              <el-col :span="14">
                <div style="width: 800px;height:600px" ref="chart3"></div>
              </el-col>
              <el-col :span="10">
                <div style="margin-left:50px;margin-top: 14%;text-align: center">
                  <el-progress type="circle" :percentage="percentage" :width="320"></el-progress>
                  <div style="margin-top: 40px"><span style="font-size: 16px;font-weight: bold;">客户合约完成进度(已回款金额/总合约金额)</span></div>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>

      </div>
    </div>

  </div>
</template>

<script>
import XLSX from "xlsx";
import FileSaver from "file-saver";

export default {
  data () {
    return {
      changeEmp: {},//目标员工
      changeEmpCustomerList: [],
      dialogChange: false,
      percentage: 0,
      pageSizes:[10,20,30],//页大小数组
      defaultSection: 'all',
      defaultSectionMoney: '1',
      handleClickMoneyCount: 'all',
      //客户表单验证
      rules :{
        customerName: [
          { required: true,message: '请输入客户名称', trigger: 'blur' },
          { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
        ],
        customerSimplename: [
          { required: true,message: '请输入客户简称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        customerFrom: [
          { required: true, message: '请选择客户来源', trigger: 'blur' }
        ],
        customerPhone: [
          { required: true ,message: '请输入客户联系方式', trigger: 'blur' },
          { min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
        ],
        customerType: [
          { required: true, message: '请选择客户类型', trigger: 'blur' }
        ],
        customerAddress: [
          { required: true,message: '请输入客户地址', trigger: 'blur' },
          { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' }
        ]
      },

      emp: {
        empId: '',
        empName: '',
      },
      empList: [],
      pageSize: 10, //分页页大小
      currPage: 1, //当前页码，默认为1
      totalSize: 0, //总记录数
      // 标签页
      activeName: 'first',
      // 客户分级搜索
      allOptions: [{
        label: '全部数据',
        options: [{
          id: 'qbsj',
          value: '',
          label: '全部数据'
        }]
      }, {
        label: '员工',
        options: [{
          parentLabel: '员工',
          id: 'wdkh',
          value: 'me',
          label: '我的客户'
        }, {
          parentLabel: '员工',
          id: 'fwdkh',
          value: 'notme',
          label: '非我的客户'
        }]
      }, {
        label: '种类',
        options: [{
          parentLabel: '种类',
          id: 'kh',
          value: 'kh',
          label: '客户'
        }, {
          parentLabel: '种类',
          id: 'gys',
          value: 'gys',
          label: '供应商'
        }, {
          parentLabel: '种类',
          id: 'hzhb',
          value: 'hzhb',
          label: '合作伙伴'
        }, {
          parentLabel: '种类',
          id: 'mt',
          value: 'mt',
          label: '媒体'
        }, {
          parentLabel: '种类',
          id: 'qt',
          value: 'qt',
          label: '其他'
        }]
      }],
      allValue: '',
      customerList: [],
      customer: {
        customerId: 0,//客户ID
        customerSimplename: '',//客户简称
        customerName: '',//客户名称
        customerLifecycle: '',//生命周期
        customerType: '',//客户种类（类型）
        customerContractdate: '',//客户首次签约日期
        customerCreatDate: '',//客户创建日期
        customerPhone: '',//客户手机
        customerTel: '',//客户电话
        customerTip: '',//客户备注
        customerFrom: '',//客户来源
        custoemrCompanyname: '',//公司名称
        customerCompanytip: '',//公司备注
        customerPeoplenumber: '',//公司人数规模
        customerWork: '',//从事行业
        customerHttp: '',//公司网址
        customerAddress: '',//详细地址
        customerImg: '',//用户画像
        contractsByCustomerId:null,
        employeeByEmpId:null,

      },
      moneyData: [{
        id: '',
        simpleName: '',
        name: '',
        owner: '',
        totalMoney: '',
        payMoney: '',
        bill: '',
        hk: '',
        hkjh: ''
      }],
      multipleSelection: [],
      dialogFormVisible: false,
      dialogFormEditVisible: false,
      userFrom: [{
        value: 1,
        label: '电话来访'
      }, {
        value: 2,
        label: '客户介绍'
      }, {
        value: 3,
        label: '独立开发'
      }, {
        value: 4,
        label: '媒体宣传'
      }, {
        value: 5,
        label: '老客户'
      }],
      userType: [{
        value: 1,
        label: '客户'
      }, {
        value: 2,
        label: '供应商'
      }, {
        value: 3,
        label: '合作伙伴'
      }, {
        value: 4,
        label: '媒体'
      }, {
        value: 5,
        label: '其他'
      }],
      customerLifecycle: [{
        value: 1,
        label: '潜在客户'
      }, {
        value: 2,
        label: '签约'
      }, {
        value: 3,
        label: '重复购买'
      }, {
        value: 4,
        label: '失效'
      }],
      textarea: '',
      lifeCycleRadio: 1,
      isEmp: true,
      empValue: '',
      cusCurrPage: 1,
      cusPageSize: 6,
      visible: false,
      innerDialog:false,
      cusTotalSize: 0,
      searchValue: '',
      dialogFormAddVisible: false,
      lifeCycleAllList: [],
      lifeCycleAllListJson: [],
      fromAllList: [],
      fromAllListJson: [],
      contractAll: [],
      contractAllJson: [],
      mulSelection: [],
      selectList: [],
      content: '',//初始化数据的判断位
      contentValue: 0,//判读搜索种类类型
      initDateIndex: 1,//初始化数据的初始化类型判断

    }
  },
  methods: {
    initData(currPage, pageSize,content,initDateIndex) {
      if(initDateIndex == 1){
        this.initDateIndex = 1;
        if(content == ''){
          this.$axios.get("http://localhost:8088/customer-contract-list", {
            params: {
              page: currPage,
              size: pageSize,
              empId: 1
            }
          })
            .then(v => {
              console.log(v.data.rows)
              this.customerList = v.data.rows;
              this.totalSize = v.data.total;
              console.log(this.totalSize)
              console.log(this.customerList)
              this.content = '';
            })
            .catch(function(v) {})
        }else if(content == 'me'){
          this.$axios.get('http://localhost:8088/customer-emp-list', {
            params: {
              page: this.currPage,
              size: this.pageSize,
            }
          })
            .then(v => {
              console.log(v.data.rows)
              this.customerList = v.data.rows
              this.totalSize = v.data.total
              this.content = 'me';
            })
            .catch(function (v) {})
        }else if(content == 'notme'){
          this.$axios.get('http://localhost:8088/customer-notemp-list', {
            params: {
              page: this.currPage,
              size: this.pageSize,
            }
          })
            .then(v => {
              console.log(v.data.rows)
              this.customerList = v.data.rows
              this.totalSize = v.data.total
              this.content = 'notme';
            })
            .catch(function (v) {})
        }else if(content == 'kh' || content == 'gys' || content == 'hzhb' || content == 'mt' || content == 'qt'){
          switch (content) {
            case 'kh':this.contentValue = 1;this.content = 'kh'; break;
            case 'gys':this.contentValue = 2;this.content = 'gys'; break;
            case 'hzhb':this.contentValue = 3;this.content = 'hzhb'; break;
            case 'mt':this.contentValue = 4;this.content = 'mt'; break;
            case 'qt':this.contentValue = 5;this.content = 'qt'; break;
          }
          this.$axios.get('http://localhost:8088/customer-type-list', {
            params: {
              page: this.currPage,
              size: this.pageSize,
              customerType: this.contentValue
            }
          })
            .then(v => {
              console.log(v.data.rows)
              this.customerList = v.data.rows
              this.totalSize = v.data.total
            })
            .catch(function (v) {})
        }
      }
      if(initDateIndex == 2){
        this.initDateIndex = 2;
        if(content == ''){
          this.$message({
            type: 'warning',
            message: '搜索内容不能为空！'
          })
        }else{
          this.content = content;
          this.$axios.get('http://localhost:8088/customer-search-list', {
            params: {
              page: this.currPage,
              size: this.pageSize,
              searchValue: this.content,
            }
          })
            .then(v => {
              this.customerList = v.data.rows
              this.totalSize = v.data.total
            })
            .catch(function (v) {})
        }
      }

    },
    changePage(val) {
      //val就是当前页码
      this.initData(val, this.pageSize,this.content,this.initDateIndex);
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    //修改
    handleEdit(val){
      this.dialogFormEditVisible = true;
      //this.customer = val;
      this.customer.customerId = val.customerId;
      this.customer.customerName = val.customerName;
      this.customer.customerSimplename = val.customerSimplename;
      this.customer.customerLifecycle = val.customerLifecycle;
      this.customer.customerType = val.customerType;
      this.customer.empId = val.empId;
      this.customer.customerCreatdate = val.customerCreatdate;
      this.customer.customerContractdate = val.customerContractdate;
      this.customer.customerPhone = val.customerPhone;
      this.customer.customerTel = val.customerTel;
      this.customer.customerTip = val.customerTip;
      this.customer.customerFrom = val.customerFrom;
      this.customer.custoemrCompanyname = val.custoemrCompanyname;
      this.customer.customerCompanytip = val.customerCompanytip;
      this.customer.customerPeoplenumber = val.customerPeoplenumber;
      this.customer.customerWork = val.customerWork;
      this.customer.customerHttp = val.customerHttp;
      this.customer.customerAddress = val.customerAddress;
      this.customer.customerImg = val.customerImg;
      this.customer.contractsByCustomerId = val.contractsByCustomerId;
      this.customer.employeeByEmpId = val.employeeByEmpId;
      console.log(this.customer)
    },
    handleSelectionChange (val) {
      this.mulSelection = val
    },
    // 打开dialog事件
    openDialog () {
      //this.customer.employeeByEmpId = this.emp
    },
    // 关闭dialog事件
    closeDialog (formName) {
      this.$refs[formName].resetFields();
      this.customer = {
        customerId: 0,//客户ID
        customerSimplename: '',//客户简称
        customerName: '',//客户名称
        customerLifecycle: '',//生命周期
        customerType: '',//客户种类（类型）
        customerContractdate: '',//客户首次签约日期
        customerCreatdate: '',//客户创建日期
        customerPhone: '',//客户手机
        customerTel: '',//客户电话
        customerTip: '',//客户备注
        customerFrom: '',//客户来源
        custoemrCompanyname: '',//公司名称
        customerCompanytip: '',//公司备注
        customerPeoplenumber: '',//公司人数规模
        customerWork: '',//从事行业
        customerHttp: '',//公司网址
        customerAddress: '',//详细地址
        customerImg: '',//用户画像
        contractsByCustomerId:null,
        employeeByEmpId: null,

      }
    },
    //删除提示
    handleDelete (val) {
      this.$confirm('此操作将永久删除客户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {

        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleClickCount (tab,event) {
      if(this.defaultSection == 'my'){
        this.lifeCycleAllList = [],
        this.lifeCycleAllListJson = [],
        this.fromAllList = [],
        this.fromAllListJson = [],
        this.$axios.get('http://localhost:8088/customer-lifecycle-number-my')
          .then(v => {
            this.lifeCycleAllList = v.data
            //计算
            this.computeLifeCycleNumber();
            this.initCharts()
          })
          .catch(function (v) {})
        this.$axios.get('http://localhost:8088/customer-from-number-my')
          .then(v => {
            this.fromAllList = v.data
            //计算
            this.computeFromNumber();
            this.initCharts2()
          })
          .catch(function (v) {})
      }else if(this.defaultSection == 'all'){
        this.lifeCycleAllList = [],
        this.lifeCycleAllListJson = [],
        this.fromAllList = [],
        this.fromAllListJson = [],
        this.$axios.get('http://localhost:8088/customer-lifecycle-number-all')
          .then(v => {
            this.lifeCycleAllList = v.data
            //计算
            this.computeLifeCycleNumber();
            this.initCharts()
          })
          .catch(function (v) {})
        this.$axios.get('http://localhost:8088/customer-from-number-all')
          .then(v => {
            this.fromAllList = v.data
            //计算
            this.computeFromNumber();
            this.initCharts2()
          })
          .catch(function (v) {})
      }
    },
    handleClickContract(tan,event){
      if(this.defaultSectionMoney == '2'){
        this.contractAll = [],
        this.contractAllJson = [],
        this.$axios.get('http://localhost:8088/customer-contract-emp')
          .then(v => {
            this.contractAll = v.data
            if(this.contractAll[0].amount == undefined){
              this.contractAll[0].amount = 0
            }else if(this.contractAll[0].back == undefined){
              this.contractAll[0].back = 0
            }else if(this.contractAll[0].surplus == undefined){
              this.contractAll[0].surplus = 0
            }
            console.log(this.contractAll)
            //计算
            this.computerContractNumber();
            this.percentage = Math.floor(Math.floor((this.contractAll[0].back/this.contractAll[0].amount)*100))
          })
          .catch(function (v) {})
      }else{
        this.contractAll = [],
        this.contractAllJson = [],
        this.$axios.get('http://localhost:8088/customer-contract-all')
          .then(v => {
            this.contractAll = v.data
            if(this.contractAll[0].amount == undefined){
              this.contractAll[0].amount = 0
            }else if(this.contractAll[0].back == undefined){
              this.contractAll[0].back = 0
            }else if(this.contractAll[0].surplus == undefined){
              this.contractAll[0].surplus = 0
            }
            console.log(this.contractAll)
            //计算
            this.computerContractNumber();
            this.percentage = Math.floor(Math.floor((this.contractAll[0].back/this.contractAll[0].amount)*100))
          })
          .catch(function (v) {})
      }
    },
    //客户生命周期数量查询
    customerLifeCycleNumber(){
      this.$axios.get('http://localhost:8088/customer-lifecycle-number-all')
        .then(v => {
          this.lifeCycleAllList = v.data
          //计算
          this.computeLifeCycleNumber();
          console.log(this.lifeCycleAllList);
          console.log(this.lifeCycleAllListJson);
        })
        .catch(function (v) {})
    },
    computeLifeCycleNumber(){
      for(let i=0;i<this.lifeCycleAllList.length;i++) {
        if (this.lifeCycleAllList[i].dates == 1) {
          this.lifeCycleAllListJson.push({value: this.lifeCycleAllList[i].number, name: '潜在客户'})
        } else if (this.lifeCycleAllList[i].dates == 2) {
          this.lifeCycleAllListJson.push({value: this.lifeCycleAllList[i].number, name: '签约'})
        } else if (this.lifeCycleAllList[i].dates == 3) {
          this.lifeCycleAllListJson.push({value: this.lifeCycleAllList[i].number, name: '重复购买'})
        } else if (this.lifeCycleAllList[i].dates == 4) {
          this.lifeCycleAllListJson.push({value: this.lifeCycleAllList[i].number, name: '失效'})
        }
      }
    },
    //客户来源数量查询
    customerFromNumber(){
      this.$axios.get('http://localhost:8088/customer-from-number-all')
        .then(v => {
          this.fromAllList = v.data
          //计算
          this.computeFromNumber();
        })
        .catch(function (v) {})
    },
    computeFromNumber(){
      for(let i=0;i<this.fromAllList.length;i++) {
        if (this.fromAllList[i].dates == 1) {
          this.fromAllListJson.push({value: this.fromAllList[i].number, name: '电话来访'})
        } else if (this.fromAllList[i].dates == 2) {
          this.fromAllListJson.push({value: this.fromAllList[i].number, name: '客户介绍'})
        } else if (this.fromAllList[i].dates == 3) {
          this.fromAllListJson.push({value: this.fromAllList[i].number, name: '独立开发'})
        } else if (this.fromAllList[i].dates == 4) {
          this.fromAllListJson.push({value: this.fromAllList[i].number, name: '媒体宣传'})
        } else if (this.fromAllList[i].dates == 5) {
          this.fromAllListJson.push({value: this.fromAllList[i].number, name: '老客户'})
        }
      }
    },
    //财务数据统计
    contractNumber(){
      this.$axios.get('http://localhost:8088/customer-contract-all')
        .then(v => {
          this.contractAll = v.data
          if(this.contractAll[0].amount == undefined){
            this.contractAll[0].amount = 0
          }else if(this.contractAll[0].back == undefined){
            this.contractAll[0].back = 0
          }else if(this.contractAll[0].surplus == undefined){
            this.contractAll[0].surplus = 0
          }
          //计算
          this.computerContractNumber();
          this.percentage = Math.floor((this.contractAll[0].back/this.contractAll[0].amount)*100)
          console.log(this.contractAll[0].back+ '' +this.contractAll[0].amount)
        })
        .catch(function (v) {})
    },
    computerContractNumber(){
      for(let i=0;i<this.contractAll.length;i++) {
        this.contractAllJson.push(this.contractAll[i].amount);
        this.contractAllJson.push(this.contractAll[i].amount);//代替发货产品总值
        this.contractAllJson.push(this.contractAll[i].back);
        this.contractAllJson.push(this.contractAll[i].surplus);
      }
    },
    initCharts () {
      let myChart = this.$echarts.init(this.$refs.chart)
      console.log(this.$refs.chart)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '客户生命周期',
          left: 'center',
          top: 10,
          textStyle: {
            color: 'black'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          data: ['潜在客户', '签约', '重复购买', '失效']
        },
        series: [
          {
            name: '生命周期',
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: this.lifeCycleAllListJson
          }
        ]
      })
    },
    initCharts2 () {
      let myChart = this.$echarts.init(this.$refs.chart2)
      console.log(this.$refs.chart2)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '客户来源分布',
          left: 'center',
          top: 10,
          textStyle: {
            color: 'black'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          data: ['电话来访', '客户介绍', '独立开发', '媒体宣传','老客户']
        },
        series: [
          {
            name: '客户来源',
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: this.fromAllListJson
          }
        ]
      })
    },
    initCharts3 () {
      let myChart = this.$echarts.init(this.$refs.chart3)
      console.log(this.$refs.chart3)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '合约财务统计',
          left: 'center',
          top: 10,
          textStyle: {
            color: 'black'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['合约总金额', '交付/发货产品总价', '回款','待回款'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '金额(元)',
            type: 'bar',
            barWidth: '60%',
            data: this.contractAllJson
          }
        ]
      })
    },
    //新增客户
    addNewCustomer(formName){
      this.customer.customerCreatdate = this.addDate()
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/new-customer',this.customer)
            .then(v => {
              // 1、刷新数据
              this.initData(this.currPage, this.pageSize,'',1)
              // 2、关闭弹框
              this.dialogFormVisible = false
              this.dialogFormAddVisible = false
              // 3、重新初始化表单数据模型
              this.customer = {
                customerId: 0,//客户ID
                customerSimplename: '',//客户简称
                customerName: '',//客户名称
                customerLifecycle: '',//生命周期
                customerType: '',//客户种类（类型）
                customerContractdate: '',//客户首次签约日期
                customerCreatDate: '',//客户创建日期
                customerPhone: '',//客户手机
                customerTel: '',//客户电话
                customerTip: '',//客户备注
                customerFrom: '',//客户来源
                custoemrCompanyname: '',//公司名称
                customerCompanytip: '',//公司备注
                customerPeoplenumber: '',//公司人数规模
                customerWork: '',//从事行业
                customerHttp: '',//公司网址
                customerAddress: '',//详细地址
                customerImg: '',//用户画像
                contractsByCustomerId:{},
                employeeByEmpId: {

                },
              }
            })
            .catch(function (v) {})
          this.$message({
            type: 'success',
            message: '已保存!'
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //更新客户数据
    updateCustomer(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/update-customer',this.customer)
            .then(v => {
              // 1、刷新数据
              this.initData(this.currPage, this.pageSize,'',1)
              // 2、关闭弹框
              this.dialogFormEditVisible = false
              // 3、重新初始化表单数据模型
              this.customer = {
                customerId: 0,//客户ID
                customerSimplename: '',//客户简称
                customerName: '',//客户名称
                customerLifecycle: '',//生命周期
                customerType: '',//客户种类（类型）
                customerContractdate: '',//客户首次签约日期
                customerCreatDate: '',//客户创建日期
                customerPhone: '',//客户手机
                customerTel: '',//客户电话
                customerTip: '',//客户备注
                customerFrom: '',//客户来源
                custoemrCompanyname: '',//公司名称
                customerCompanytip: '',//公司备注
                customerPeoplenumber: '',//公司人数规模
                customerWork: '',//从事行业
                customerHttp: '',//公司网址
                customerAddress: '',//详细地址
                customerImg: '',//用户画像
                contractsByCustomerId:{},
                employeeByEmpId: {

                },
              }
            })
            .catch(function (v) {})
          this.$message({
            type: 'success',
            message: '已保存!'
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //转移选中判断
    judeSelect(){
      if(this.mulSelection.length == 0){
        this.$message({
          type: 'error',
          message: '未选取客户!'
        });
      }else{
        this.dialogChange = true
      }
    },
    //转移前提示
    changeEmpMessage(){
      console.log(this.changeEmp.empId)
      if(this.changeEmp.empId == undefined){
        this.$message({
          type: 'error',
          message: '未选取目标员工!'
        });
      }else{
        this.$confirm('此操作将会把所有选中客户转到到目标客户！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.changeEmpAxios()
          this.$message({
            type: 'success',
            message: '转移成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消转移！'
          });
        });
      }
    },
    //转移客户
    changeEmpAxios(){
      this.mulSelection.forEach((item)=> {
        this.changeEmpCustomerList.push(item);
        for (let i = 0; i < this.changeEmpCustomerList.length; i++) {
          this.changeEmpCustomerList[i].employeeByEmpId = this.changeEmp;
        }
      })
      console.log(this.changeEmpCustomerList)
      this.$axios.post('http://localhost:8088/update-customer-emp',this.changeEmpCustomerList)
        .then(v => {
          // 1、刷新数据
          this.initData(this.currPage, this.pageSize,'',1)
          // 2、关闭弹框
          this.dialogChange = false
          // 3、重新初始化表单数据模型
          this.customer = {
            customerId: 0,//客户ID
            customerSimplename: '',//客户简称
            customerName: '',//客户名称
            customerLifecycle: '',//生命周期
            customerType: '',//客户种类（类型）
            customerContractdate: '',//客户首次签约日期
            customerCreatDate: '',//客户创建日期
            customerPhone: '',//客户手机
            customerTel: '',//客户电话
            customerTip: '',//客户备注
            customerFrom: '',//客户来源
            custoemrCompanyname: '',//公司名称
            customerCompanytip: '',//公司备注
            customerPeoplenumber: '',//公司人数规模
            customerWork: '',//从事行业
            customerHttp: '',//公司网址
            customerAddress: '',//详细地址
            customerImg: '',//用户画像
            contractsByCustomerId:{},
            employeeByEmpId: {},
          }
          this.changeEmpCustomerList = []
        })
        .catch(function (v) {})
    },
    // 获取当前日期
    addDate () {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },



    // 打开内层dialog
    innerVisible (cusCurrPage,cusPageSize) {
      this.$axios.get('http://localhost:8088/emp-list-lj', {
        params: {
          page: cusCurrPage,
          size: cusPageSize,
        }
      })
        .then(v => {
          this.empList = v.data.rows
          this.cusTotalSize = v.data.total
        })
        .catch(function (v) {})
      this.innerDialog = true
    },
    //内层分页
    cusChangePage (val) {
      // val就是当前页码
      this.innerVisible(val, this.cusPageSize)
    },
    // 模糊查询员工
    findEmp(){
      if (this.empValue != ''){
        this.visible = true
        this.$axios.get('http://localhost:8088/emp-fuzzy-list', {
          params: {
            empName: this.empValue
          }
        })
          .then(v => {
            this.empList = v.data
          })
          .catch(function (v) {})
      }else {
        this.visible = false
      }
    },
    // 选择客户
    choiceEmp(val){
      this.customer.employeeByEmpId = val
      this.visible = false
      this.innerDialog = false;
    },
    // 选择客户2
    choiceEmp2(val){
      this.changeEmp = val
      this.visible = false
      this.innerDialog = false;
    },
    // 失去焦点关闭模糊搜索框
    nullFocus(){
      this.visible = false
    },
    //新增客户完整版Dialog
    addCustomerDetail(){
      this.dialogFormVisible = false;
      this.dialogFormAddVisible = true;

    },
    // pdf打印
    handleWindowPrint (ele, fileName) {
      // 去除页面不必要的 head 标签内  内容， 避免影响打印页 ， title 为保存为 pdf 的文件时的 文件名
      document.head.innerHTML = '<meta charset="utf-8">\n' +
        ' <title> ' + fileName + '</title>\n' +
        ' <meta name="format-detection" content="telephone=no">\n' +
        ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
        ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
        ' <link rel="stylesheet" href="./static/css/contract.css"/>'
      document.body.innerHTML = document.querySelector(ele).outerHTML
      // 转异步 等待dom元素渲染（样式）完毕在打印
      setTimeout(() => {
        // 打印
        window.print()
        // 刷新页面
        window.location.reload()
      }, 20)
    },
    //导出excel
    exportExcelCustomer () {
      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTableCustomer"),xlsxParam);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "客户基本信息(当前页).xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    exportExcelCustomerMoney () {
      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTableCustomerMoney"),xlsxParam);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "客户财务数据(当前页).xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

    //导出前判断选中
    judePrint(){
      if(this.mulSelection.length == 0){
        this.$message({
          type: 'error',
          message: '未选取客户!'
        });
      }else{
        this.batchExportExcel()
      }
    },
    //批量导出excel batchList
    batchExportExcel(){
      this.mulSelection.forEach((item,i)=>{
        this.$set(item,'customerId',item.customerId);
        this.$set(item,'customerSimplename',item.customerSimplename);
        this.$set(item,'customerName',item.customerName);
        if (item.customerLifecycle === 0){
          this.$set(item,'customerLifecycle','潜在客户');
        }else if(item.customerLifecycle === 1){
          this.$set(item,'customerLifecycle','签约');
        }else if(item.customerLifecycle === 2){
          this.$set(item,'customerLifecycle','重复购买');
        }else if(item.customerLifecycle === 3){
          this.$set(item,'customerLifecycle','失效');
        };
        if (item.customerType === 0){
          this.$set(item,'customerType','客户');
        }else if(item.customerType === 1){
          this.$set(item,'customerType','供应商');
        }else if(item.customerType === 2){
          this.$set(item,'customerType','合作伙伴');
        }else if(item.customerType === 3){
          this.$set(item,'customerType','媒体');
        }else if(item.customerType === 4){
          this.$set(item,'customerType','其他');
        };
        this.$set(item,'empName',item.employeeByEmpId.empName);
        this.$set(item,'customerCreatdate',item.customerCreatdate);
        if(item.contractsByCustomerId[0] != null){
          this.$set(item,'contractTotalAmount',item.contractsByCustomerId[0].contractTotalAmount);
          this.$set(item,'contractTotalAmount',item.contractsByCustomerId[0].contractTotalAmount);
          this.$set(item,'contractBackAmount',item.contractsByCustomerId[0].contractBackAmount);
          this.$set(item,'surplus',item.contractsByCustomerId[0].contractTotalAmount-item.contractsByCustomerId[0].contractBackAmount);
        }else{
          this.$set(item,'contractTotalAmount',0);
          this.$set(item,'contractTotalAmount',0);
          this.$set(item,'contractBackAmount',0);
          this.$set(item,'surplus',0);
        }

        this.selectList.splice(i,0,item);
      })
      //excel数据导出
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('../js/Export2Excel');
        const tHeader = ['ID','简称','客户名称','生命周期','客户类型','所有者','创建日期', '合约总金额(元)', '交付/发货产品总价(元)','回款(元)','待回款(元)'];
        const filterVal = ['customerId','customerSimplename','customerName','customerLifecycle','customerType','empName','customerCreatdate','contractTotalAmount', 'contractTotalAmount','contractBackAmount',
          'surplus'];
        const list = this.selectList;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '客户批量导出');
      })
      this.initData(this.currPage, this.pageSize,this.content,this.initDateIndex)
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    closeChangeEmp(){
      this.changeEmp = {}
    }

  },
  created: function() {
    this.customerLifeCycleNumber()
    this.customerFromNumber()
    this.contractNumber()
    this.initData(this.currPage, this.pageSize,this.content,1)
  },
  mounted () {

  },
  updated() {
    this.initCharts()
    this.initCharts2()
    this.initCharts3()
  },
  watch:{
    lifeCycleAllList(val){
      this.initCharts()
    },
    fromAllList(val){
      this.initCharts2()
    },
    contractAll(val){
      this.initCharts3()
    }
  }
}

</script>

<style>

  .text-muted {
    color: #98a6ad;
  }
  .font-13 {
    font-size: 13px !important;
  }
  .text-right {
    text-align: right;
    float: right;
  }
  .form-inline{
    position: relative;
    top: -15px;
    left: 100px;
  }


  .text-muted {
    color: #98a6ad;
  }

  .font-13 {
    font-size: 13px !important;
  }

  .text-right {
    text-align: right;
    float: right;
  }

  .form-inline {
    position: relative;
    top: -5px;
    left: 100px;
  }
  .cu-ul{
    padding-left: 10px;
    margin: 0;
  }
  .cu-ul li{
    font-weight: bold;
    list-style-type:none;
    cursor:pointer;
    margin-bottom: 10px;
  }
  .cu-ul li:hover{
    color: #23527c;
  }
</style>
